<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单控件——表单控件大小</title>
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<!--
Bootstrap框架中checkbox和radio有点特殊，Bootstrap针对他们做了一些特殊化处理，
主要是checkbox和radio与label标签配合使用会出现一些小问题（最头痛的是对齐问题）。
使用Bootstrap框架，开发人员无需考虑太多，只需要按照下面的方法使用即可。

从示例，可以得知：

1、不管是checkbox还是radio都使用label包起来了
2、checkbox连同label标签放置在一个名为“.checkbox”的容器内
3、radio连同label标签放置在一个名为“.radio”的容器内

在Bootstrap框架中，主要借助“.checkbox”和“.radio”样式，来处理复选框、单选按钮与标签的对齐方式。源码请查看bootstrap.css文件第1742行～第1762行：
-->
<form role="form">
  <h3>案例1</h3>
  
  <div class="checkbox">    <!--checkbox连同label标签放置在一个名为“.checkbox”的容器内-->
    <label>
      <input type="checkbox" value="">
      记住密码
    </label>
  </div>
  
  <div class="radio">       <!--radio连同label标签放置在一个名为“.checkbox”的容器内-->
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
      喜欢
    </label>
  </div>
  <div class="radio">      <!--radio连同label标签放置在一个名为“.checkbox”的容器内-->
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
      不喜欢
    </label>
  </div>  
</form>     
</body>
</html>